<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"/>
<meta http-equiv="Refresh" content="5;url=RoomInfos">
<!-- <link rel="stylesheet" href="./st2c/resources/css/sencha-touch.css" type="text/css"> -->	
<title>Room Monitoring System Web-Page</title>
<style type="text/css">
#container {
	width: 100%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#mainContent{
 	/* background-color:#888888; */
}
#subContent{
	text-align: center; 
	padding : 0 10px;
 	/* background-color:#DDDDDD; */	 
}
#header {
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#header h2 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#title-bar{
	padding : 2px 2px;
	background-image: url(node_bar2.png);	
}
#data-bar{
	padding : 2px 2px;
	background-image: url(node_bar.png);	
}
</style>
</head>
<body>
 <div id="container">
 	<div id="header">	
 		<h2 align = "center">룸 모니터링 시스템</h2>
 	</div>  	
 	<div id="mainContent"> 
 	<h5>Last Update : ${ROOMINFO_LIST.date[2]}</h5>
 	

 	 <table id=subContent width="100%" >
      <tr>
        <th id='title-bar'>ID</th>
        <th id='title-bar'>호실</th>
        <th id='title-bar'>CO2(ppm)</th>
        <th id='title-bar'>온도(℃)</th>
        <th id='title-bar'>습도(%)</th>
        <!-- <th id='title-bar'>Extra</th> -->
      </tr>      
      <c:forEach var = "cnt" begin="0" end = "19">
      	<tr>
      		<td id="data-bar">${ROOMINFO_LIST.node_id[cnt]}</td>
      	    <td id="data-bar">${ROOMINFO_LIST.roomname[cnt]}</td>
            <td id="data-bar">
            <c:if test="${ROOMINFO_LIST.CO2led[cnt]==0}">
            	<img id="images" src="images/redled.png"/>
            </c:if>
            <c:if test="${ROOMINFO_LIST.CO2led[cnt]!=0}">
            	<img id="images" src="images/empty_circle.png"/>
            </c:if>      
             ${ROOMINFO_LIST.CO2[cnt]}
            <c:if test="${ROOMINFO_LIST.temperled[cnt]==0}">
            	<img id="images" src="images/greenled.png"/>
            </c:if>
            <c:if test="${ROOMINFO_LIST.temperled[cnt]!=0}">
            	<img id="images" src="images/empty_circle.png"/>
            </c:if>
            </td>
            <td id="data-bar">${ROOMINFO_LIST.temperature[cnt]}</td>
            <td id="data-bar">${ROOMINFO_LIST.humidity[cnt]}</td>
            <%-- <td id="data-bar">${ROOMINFO_LIST.warmup[cnt]},${ROOMINFO_LIST.CO2led[cnt]},${ROOMINFO_LIST.CO2alram[cnt]},${ROOMINFO_LIST.temperled[cnt]}</td> --%>
        </tr>
		</c:forEach>
      </table>
 	</div> 
 </div>
</body>
<%session.invalidate(); %>
</html>

 